<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="com.google.appengine.repackaged.org.json.JSONObject" %>
<%@ page import="com.google.appengine.repackaged.org.json.JSONException" %>
<%-- controller = game, action = play --%>
<%
  Context ctx = Context.get();
  Gson gson = new Gson();
  Map game = (Map) ctx.data.get("game");
  List<Map> rxns = (List<Map>) game.get("reaction");
%>
<script>
  $(document).ready(function() {
    <%
    if (rxns != null && rxns.size() > 0) {
    %>
    be.init('<%= game.get("id") %>', <%= gson.toJson(rxns) %>);
    <%
    } else {
    %>
    be.init('<%= game.get("id") %>', <%= "[{\"reactants\":[" +
       "{\"formula\":\"NaHCO3\",\"common_name\":\"Baking Soda\",\"atoms\":{\"Na\":1,\"H\":1,\"C\":1,\"O\":3},\"quantity\":\"1\"}," +
       "{\"formula\":\"HCOOH\",\"common_name\":\"Formic Acid\",\"atoms\":{\"H\":2,\"C\":1,\"O\":2},\"quantity\":\"1\"}" +
      "]," +
      "\"products\":[" +
       "{\"formula\":\"H2O\",\"common_name\":\"Water\",\"atoms\":{\"H\":2,\"O\":1},\"quantity\":\"1\"}," +
       "{\"formula\":\"CO2\",\"common_name\":\"Carbon Dioxide\",\"atoms\":{\"C\":1,\"O\":2},\"quantity\":\"1\"}," +
       "{\"formula\":\"HCOONa\",\"common_name\":\"Sodium Formate\",\"atoms\":{\"H\":1,\"C\":1,\"O\":2,\"Na\":1},\"quantity\":\"1\"}" +
      "]," +
      "\"image\":[" +
        "{\"url\":\"/images/fire.png\"}" +
      "]}]"
     %>);
    <%
    }
    %>
  });
</script>
<div id="ibe">
  <canvas class="f-right" width="250px" height="350px" style="padding-left:20px;"></canvas>
  <h3>Balancing Chemical Equations : Introduction</h3>
  <p>
    A chemical <span class="u">reaction</span> is a process that transforms one
    set of substances to another.
  </p>
  <p>
    A chemical <span class="u">equation</span> is a symbolic or graphical
    representation of a chemical reaction.
  </p>
  <p>
    The reactants and products involved are specified by chemical or structural formulas
    on the left and right side, respectively.
  </p>
  <p>
    A chemical reaction is balanced when no atoms are created or destroyed
    during the reaction. In other words, a chemical reaction is balanced when
    it observes law of conservation of mass.
  </p>
  <p class="a-right">
    <button onclick="be.showReview()">Continue</button>
    <button onclick="be.showCards();">Skip intro</button>
  </p>
</div>
<div id="rbe" class="d-none">
  <h3>Balancing Chemical Equations : Review</h3>
  <table>
    <tr>
      <td>
        <canvas class="qc" width="200px" height="280px" style="padding-right:20px;"></canvas>
      </td>
      <td>
        <p>
          In this game, you will be presented with reaction question cards and
          asked to find the matching reaction answer card.
        </p>
        <p>
          Question cards will specify the names and formulas of the reactants.
        </p>
        <p>
          Answer cards will illustrate a chemical reaction but only one will be
          balanced with the same reactants from the question card.
        </p>
        <p>
          Remember, no atoms are created or destroyed during a reaction.
        </p>
      </td>
      <td>
        <canvas class="ac" width="200px" height="280px" style="padding-left:20px;"></canvas>
      </td>
    </tr>
  </table>
  <p>
    <button class="f-left" onclick="be.showIntro()">Back</button>
    <button class="f-right" onclick="be.showCards()">Continue</button>
  </p>
  <div class="clear"></div>
</div>
<div id="cac" class="d-none">
  <h3>Balancing Chemical Equations : Choose an Answer Card</h3>
  <table class="a-center">
    <tr>
      <td>
        <button onclick="be.showReview()">Review</button>
      </td>
      <td>
        <canvas class="qc d-inline" width="180px" height="252px"></canvas>
      </td>
      <td>
        <table id="dac" ondragover="dnd.over(event)" ondrop="dnd.drop(event)">
          <tr>
            <td>
              <div class="drop-instruction">
                Drag and drop the matching answer card here
              </div>
              <canvas class="sac d-none" width="180px" height="252px"></canvas>
            </td>
          </tr>
        </table>
      </td>
      <td>
        <button class="confirm d-none" onclick="be.confirmChoice()">Confirm choice</button>
      </td>
    </tr>
  </table>
  <br />
  <div class="answer-cards">
    <div style="width:1024px;">
    <%
      for (int i = 0; i < 5; i++) {
    %>
      <canvas id="ac_<%= i %>" width="180px" height="252px" class="answer-card" draggable="true"
              ondragstart="dnd.start(event)" ondrag="dnd.drag(event)" ondragend="dnd.dragEnd(event)"
              data-value="<%= i %>">
      </canvas>
    <%
      }
    %>
    </div>
  </div>
</div>
<div id="ccr" class="d-none">
  <h3>Balancing Equations: Is this the correct answer card?</h3>
  <table style="width:100%">
    <tr>
      <td class="a-left">
        <canvas class="qc" width="180px" height="252px"></canvas>
      </td>
      <td class="a-center">
        TODO: Figure out what to put here.
        <br />
        <button onclick="be.showCards();">Back</button>
      </td>
      <td class="a-right">
        <canvas class="ac" width="180px" height="252px"></canvas>
      </td>
    </tr>
  </table>
</div>